<template>
	<view class="page">
		<lexiconNavVue title="授权" />
		<view class="auto-back">
			<image src="../../../static/image/logo.png" mode="" style="width: 100px; height: 100px;margin-top: 40%;"></image>
			<view class="title-str">
				拼词之星
			</view>
			<view class="title-desc">
				是否授权扫读笔登录
			</view>
			<view class="auto-button" @click="autoLoginClicked">
				授权登录
			</view>
			<popPromptBox v-if="showPopbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
		</view>
	</view>
</template>
<script>
	import util from '../../../utils/util';
	import navbar from '../../../components/navbar.vue'
	export default {
		data() {
			return {
				codeStr: '',
				showPopbox: false,
				message: ""
			};
		},
		onLoad(options) {
			console.log('options', options);
			this.codeStr = options.content;
		},
		methods: {
			// 授权登录点击事件
			autoLoginClicked() {
				var that = this;
				this.$http.snAndPhoneJoin({
					phone: util.getUserPhone(),
					sn: this.codeStr
				}).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						that.message = '授权登录成功！'
						that.showPopbox = true;
					} else {
						that.message = res.msg;
						that.showPopbox = true;
					}
				})
			},
			hidePromptbox() {
				this.showPopbox = false;
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="less">
	.page {
		height: 100vh;
		background: var(--themeBlackTopBack);
		
		overflow-y: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.auto-back {
		width: 100vw;
		// height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// background: var(--themeBlackTopBack);

		.title-str {
			width: 100%;
			margin-top: 10px;
			margin-bottom: 30px;
			font-size: 32px;
			text-align: center;
			font-family: 'hzgb';
			color: var(--themeColor);
		}

		.title-desc {
			width: 100%;
			font-size: 16px;
			text-align: center;
			color: white;
		}

		.auto-button {
			width: 200px;
			color: black;
			font-weight: bold;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			font-family: 'hzgb';
			margin-top: 50px;
			font-size: 20px;
			text-align: center;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
		}
	}
</style>